<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <style type="text/css">
        body{
            padding: 0;
            margin: 0;
            background-color: #94bfb560;
        }
        form{
            height: 500px;
            width: 300px;
            margin: 150px auto;
        }
        .bg {
            width: 500px;
            margin: 150px auto;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
<div class="bg">
    <form class="form-horizontal">
        <div class="form-group">
            <h3 class="page-header">
                学生注册
            </h3>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-1">
                学生姓名：<input type="text" class="form-control" v-model="login.loginName">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-1">
                密&emsp;码&emsp;：<input type="password" class="form-control" v-model="login.loginPw">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-1">
                确认密码：<input type="password" class="form-control" v-model="loginPw2">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-1">
                电子邮箱：<input type="email" class="form-control" v-model="login.loginEmail">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-1">
                <input type="button" value="立即注册" class="btn btn-sm" @click="addLogin">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-1">
                已有账号？<a href="index.html">请登录</a>
            </div>
        </div>

    </form>
</div>
<script src="js/vue/vue2.5.js"></script>
<script src="js/vue/axios.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/layer/layer.js"></script>
<script>
    new Vue({
        el:'.bg',
        data:{
            login:{
                loginName:'',
                loginPw:'',
                loginEmail:''
            },
            loginPw2:''
        },
        methods:{
            addLogin() {
                axios.get('/login/add',{params:this.login})
                    .then(resp =>{
                        layer.msg('注册成功！');
                        setTimeout(()=>{
                            location.href='index.html';
                        },500);
                    })
            }
        },
    })
</script>
</body>
</html>
